
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.2.3/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Wheel of Fortune Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      Konva.angleDeg = false;
      var angularVelocity = 6;
      var angularVelocities = [];
      var lastRotation = 0;
      var controlled = false;
      var numWedges = 10;
      var angularFriction = 0.2;
      var target, activeWedge, stage, layer, wheel, pointer;
      var finished = false;

      function getAverageAngularVelocity() {
        var total = 0;
        var len = angularVelocities.length;

        if (len === 0) {
          return 0;
        }

        for (var n = 0; n < len; n++) {
          total += angularVelocities[n];
        }

        return total / len;
      }
      function purifyColor(color) {
        var randIndex = Math.round(Math.random() * 3);
        color[randIndex] = 0;
        return color;
      }
      function getRandomColor() {
        var r = 100 + Math.round(Math.random() * 55);
        var g = 100 + Math.round(Math.random() * 55);
        var b = 100 + Math.round(Math.random() * 55);
        return purifyColor([r, g, b]);
      }

      function getRandomReward() {
        var mainDigit = Math.round(Math.random() * 9);
        return mainDigit + '\n0\n0';
      }
      function addWedge(n) {
        var s = getRandomColor();
        var reward = getRandomReward();
        var r = s[0];
        var g = s[1];
        var b = s[2];
        var angle = (2 * Math.PI) / numWedges;

        var endColor = 'rgb(' + r + ',' + g + ',' + b + ')';
        r += 100;
        g += 100;
        b += 100;

        var startColor = 'rgb(' + r + ',' + g + ',' + b + ')';

        var wedge = new Konva.Group({
          rotation: (2 * n * Math.PI) / numWedges,
        });

        var wedgeBackground = new Konva.Wedge({
          radius: 400,
          angle: angle,
          fillRadialGradientStartPoint: 0,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: 0,
          fillRadialGradientEndRadius: 400,
          fillRadialGradientColorStops: [0, startColor, 1, endColor],
          fill: 'green',
          fillPriority: 'radial-gradient',
          stroke: '#ccc',
          strokeWidth: 2,
        });

        wedge.add(wedgeBackground);

        var text = new Konva.Text({
          text: reward,
          fontFamily: 'Calibri',
          fontSize: 50,
          fill: 'white',
          align: 'center',
          stroke: 'yellow',
          strokeWidth: 1,
          rotation: (Math.PI + angle + 50) / 2 ,
          x: 360,
          y: 80,
          listening: false,
        });

        wedge.add(text);
        text.cache();

        wedge.startRotation = wedge.rotation();

        wheel.add(wedge);
      }
      function animate(frame) {
        // handle wheel spin
        var angularVelocityChange =
          (angularVelocity * frame.timeDiff * (1 - angularFriction)) / 1000;
        angularVelocity -= angularVelocityChange;
        // console.log(angularVelocityChange, 'angularVelocityChange', frame)
        // activate / deactivate wedges based on point intersection
        var shape = stage.getIntersection({
          x: stage.width() / 2,
          y: 100,
        });

        if (controlled) {
          if (angularVelocities.length > 10) {
            angularVelocities.shift();
          }

          angularVelocities.push(
            ((wheel.rotation() - lastRotation) * 1000) / frame.timeDiff
          );
        } else {
          var diff = (frame.timeDiff * angularVelocity) / 1000;
          console.log('frame.timeDiff', frame.timeDiff, diff)

          if (diff > 0.0001) {
            wheel.rotate(diff);
          } else if (!finished && !controlled) {
            if (shape) {
              var text = shape.getParent().findOne('Text').text();
              var price = text.split('\n').join('');
              console.log('Your price is ' + price);
            }
            finished = true;
          }
        }
        lastRotation = wheel.rotation();

        if (shape) {
          if (shape && (!activeWedge || shape._id !== activeWedge._id)) {
            pointer.y(20);

            new Konva.Tween({
              node: pointer,
              duration: 0.3,
              y: 30,
              easing: Konva.Easings.ElasticEaseOut,
            }).play();

            if (activeWedge) {
              activeWedge.fillPriority('radial-gradient');
            }
            shape.fillPriority('fill');
            activeWedge = shape;
          }
        }
      }
      function init() {
        stage = new Konva.Stage({
          container: 'container',
          width: width,
          height: height,
        });
        layer = new Konva.Layer();
        wheel = new Konva.Group({
          x: stage.width() / 2,
          y: 410,
        });

        for (var n = 0; n < numWedges; n++) {
          addWedge(n);
        }
        pointer = new Konva.Wedge({
          fillRadialGradientStartPoint: 0,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: 0,
          fillRadialGradientEndRadius: 30,
          fillRadialGradientColorStops: [0, 'white', 1, 'red'],
          stroke: 'white',
          strokeWidth: 2,
          lineJoin: 'round',
          angle: 1,
          radius: 30,
          x: stage.width() / 2,
          y: 33,
          rotation: -90,
          shadowColor: 'black',
          shadowOffsetX: 3,
          shadowOffsetY: 3,
          shadowBlur: 2,
          shadowOpacity: 0.5,
        });

        // add components to the stage
        layer.add(wheel);
        layer.add(pointer);
        stage.add(layer);

        // bind events
        wheel.on('mousedown touchstart', function (evt) {
          angularVelocity = 0;
          controlled = true;
          target = evt.target;
          finished = false;
        });
        // add listeners to container
        // stage.addEventListener(
        //   'mouseup touchend',
        //   function () {
        //     controlled = false;
        //     angularVelocity = getAverageAngularVelocity() * 5;
        //     console.log(angularVelocity, 'angularVelocity', getAverageAngularVelocity())
        //     if (angularVelocity > 20) {
        //       angularVelocity = 20;
        //     } else if (angularVelocity < -20) {
        //       angularVelocity = -20;
        //     }

        //     angularVelocities = [];
        //   },
        //   false
        // );

        // stage.addEventListener(
        //   'mousemove touchmove',
        //   function (evt) {
        //     var mousePos = stage.getPointerPosition();
        //     if (controlled && mousePos && target) {
        //       var x = mousePos.x - wheel.getX();
        //       var y = mousePos.y - wheel.getY();
        //       var atan = Math.atan(y / x);
        //       var rotation = x >= 0 ? atan : atan + Math.PI;
        //       var targetGroup = target.getParent();
        //     console.log(rotation - targetGroup.startRotation - target.angle() / 2, 'end')
        //       wheel.rotation(
        //         rotation - targetGroup.startRotation - target.angle() / 2
        //       );
        //     }
        //   },
        //   false
        // );

        var anim = new Konva.Animation(animate, layer);

        // wait one second and then spin the wheel
        setTimeout(function () {
          anim.start();
        }, 1000);
      }
      init();
    </script>
  </body>
</html>